<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 400px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
          @onChange="change"
        />
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const props = defineProps({
    modelValue:''
})
const emit = defineEmits(['change','update:modelValue'])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
const toolbarConfig = ref({})
const editorConfig = ref({ placeholder: '请输入内容...' })
const mode = ref('default') // 或 'simple'

// 模拟 ajax 异步获取内容
onMounted(() => {
   
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    valueHtml.value = props.modelValue 
}
const change = ()=>{
    if(!editorRef.value.isEmpty()){
        emit('update:modelValue',valueHtml.value) 
        emit('change',valueHtml.value)
    } 
}
</script>